<template>
  <div class="rightCont">
    <div class="task-right1">
      <PieChart></PieChart>
    </div>
    <div class="task-right2 mt10">
      <div class="right2-top">报警提醒</div>
      <div class="flex1 flexColumn" style="overflow: auto;height:264px;">
        <div
          v-for="(item, index) in realTimeList"
          :key="'alarmList' + index"
          class="right2-center flex"
        >
          <div class="task-tip"></div>
          <div>{{item.title}}</div>
          <div>
            <span :style="{color:item.color}">{{item.status}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="task-right3 mt10">
      <div class="right2-top">企业通讯</div>
      <message></message>
    </div>
  </div>
</template>

<script>
import PieChart from '@/views/dashboard/PieChart'
import message from '@/views/home/message'
export default {
  name: 'runborder',
  components: {
    PieChart,
    message,
  },
  data() {
    return {
      realTimeList: [
        {
          title: 'CDX4586-4销售订单',
          status: '已逾期',
          color: 'red',
        },
        {
          title: 'CDX4586-4销售订单',
          status: '即将逾期',
          color: '#FFB811',
        },
        {
          title: 'CDX4586-4销售订单',
          status: '已逾期',
          color: 'red',
        },
        {
          title: 'CDX4586-4销售订单',
          status: '已逾期',
          color: 'red',
        },
        {
          title: 'CDX4586-4销售订单',
          status: '即将逾期',
          color: '#FFB811',
        },

        {
          title: 'CDX4586-4销售订单',
          status: '异常接触',
          color: '#2175FF',
        },
        {
          title: 'CDX4586-4销售订单',
          status: '异常接触',
          color: '#2175FF',
        },
      ],
    }
  },

  computed: {},
  methods: {},
}
</script>

<style lang="less" scopted>
.rightCont {
  width: 340px;
  margin: 10px 10px 50px 5px;
  .task-right1 {
    width: 100%;
    height: 215px;
    background-color: #fff;
  }
  .task-right2 {
    width: 100%;
    height: 310px;
    background-color: #fff;
    .right2-top {
      width: 340px;
      line-height: 46px;
      padding: 0 10px;
      height: 46px;
      background: #ececec;
      opacity: 1;
      border-radius: 0px;
    }
    .right2-center {
      margin: 15px 10px 0px 15px;
      .task-tip {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: red;
        margin: 5px 0 0 0;
      }
      & > div {
        margin: 0 0 0 10px;
      }
    }
  }
  .task-right3 {
    width: 100%;
    max-height: 380px;
    .right2-top {
      width: 340px;
      line-height: 46px;
      padding: 0 10px;
      height: 46px;
      background: #ececec;
      opacity: 1;
      border-radius: 0px;
    }
  }
}
</style>